<template>
  <div class="index-container">
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <layout-header/>
        <sticky-navbar/>
      </el-header>

      <el-main>
        <router-view/>
      </el-main>

      <el-footer>
        <layout-bottom/>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import LayoutHeader from "@/layout/official/layout-header.vue";
import LayoutBottom from "@/layout/official/layout-bottom.vue";
import SearchBox from "@/layout/official/searchbox.vue"; // 引入搜索框组件
import StickyNavbar from "@/layout/official/daohang/daohang.vue"; // 引入固定导航栏组件
import Official from "./official.vue"; // 注意路径是否正确
import authUtils from "@/api/offical/authUtils.js"; // 引入权限工具

export default {
  name: "AppLayout",
  components: {
    LayoutHeader,
    LayoutBottom,
    SearchBox,
    Official,
    StickyNavbar // 注册固定导航栏组件
  },
  data() {
    return {
      userRoles: []
    };
  },
  async created() {
    // 在组件创建时获取用户角色
    await this.getUserRoles();
    // 在全局提供权限检查方法
    this.provideGlobalCheckMethod();
  },
  methods: {
    // 获取当前用户角色
    async getUserRoles() {
      this.userRoles = await authUtils.getCurrentUserRoles();
      console.log("当前用户角色:", this.userRoles);
      return this.userRoles;
    },

    // 检查用户是否有特定角色
    hasRole(role) {
      return this.userRoles.includes(role);
    },

    // 检查用户是否需要进行商家认证
    needToAuthenticate() {
      return authUtils.needToRedirect(this.userRoles);
    },

    // 检查是否需要重定向到商家认证页面
    async checkAuthRedirect() {
      // 获取最新用户角色
      await this.getUserRoles();

      const shouldRedirect = await authUtils.shouldRedirectToAuth(this.$route.path);
      if (shouldRedirect) {
        console.log("用户需要商家认证，重定向到商家认证页面");
        // 使用replace而不是push，以防止用户通过后退按钮绕过认证
        this.$router.replace("/auth");
        return true;
      }
      return false;
    },

    onSearch(keyword) {
      // 处理搜索逻辑
      console.log("搜索关键词：", keyword);
      // 可以在这里添加路由跳转或其他逻辑
      // 例如：根据搜索关键词更新路由参数或查询参数
      // this.$router.push({ path: '/search', query: { q: keyword } });
    },

    // 在全局提供权限检查方法
    provideGlobalCheckMethod() {
      // 将认证检查方法绑定到全局，方便其他组件调用
      window.checkAuthAndRedirect = async () => {
        await this.checkAuthRedirect();
      };

      // 重写采购和供货按钮的点击处理
      this.setupBusinessButtonHandlers();
    },

    // 设置业务按钮的点击事件处理
    setupBusinessButtonHandlers() {
      // 在组件加载后延迟执行，确保DOM已加载
      setTimeout(() => {
        // 只查找无权采购和无权供货按钮
        const businessButtons = document.querySelectorAll('button, a, .el-button');
        businessButtons.forEach(button => {
          const text = button.innerText || '';
          if (text.includes('无权采购') || text.includes('无权供货')) {
            console.log('找到无权业务按钮:', text);
            // 添加点击事件监听器
            button.addEventListener('click', async (event) => {
              console.log('无权业务按钮被点击:', text);
              // 显示消息提示
              this.$message({
                message: '您需要先完成商家认证才能进行操作',
                type: 'warning',
                duration: 3000,
                showClose: true
              });
              // 检查权限
              const shouldRedirect = await this.checkAuthRedirect();
              if (shouldRedirect) {
                // 如果需要重定向，阻止原始点击事件
                event.preventDefault();
                event.stopPropagation();
              }
            }, true); // 使用捕获阶段确保我们的处理先于原始处理
          }
        });
      }, 1000);

      // 为动态添加的按钮设置全局方法
      window.checkNoAuthButtonClick = async (event) => {
        return await this.onBusinessButtonClick(event);
      };
    },

    // 供应和采购按钮的点击处理函数(可以直接绑定到按钮上)
    async onBusinessButtonClick(event) {
      console.log('无权业务按钮点击处理');
      // 检查权限
      const shouldRedirect = await this.checkAuthRedirect();
      if (shouldRedirect) {
        this.$message({
          message: '您需要先完成商家认证才能进行操作',
          type: 'warning',
          duration: 3000,
          showClose: true
        });
        // 如果需要重定向，阻止原始点击事件
        if (event) {
          event.preventDefault();
          event.stopPropagation();
        }
        return false;
      }
      return true;
    }
  }
};
</script>

<style scoped>
.body{
  padding-left: 15%;
  padding-right: 15%;
}

.el-header {
  line-height: 0 !important;
  height: auto !important; /* 修改为自适应高度 */
  background-color: #0B0909;
  color: #333;
  width: 100%;
  padding: 0;
  position: fixed; /* 固定在顶部 */
  top: 0;
  left: 0;
  z-index: 1000;
}

.el-main {
  margin-top: 118px !important; /* 为固定定位的header留出空间 */
  background-color: #ffffff;
  color: #333;
  text-align: center;
  flex: 1;
  padding: 0;
}

.index-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.el-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* 为 el-footer 添加独立样式 */
.el-footer {
  background-color: #0b0909;
  color: #333;
  text-align: center;
  line-height: 100px;
  width: 100%; /* 确保宽度占满屏幕 */
  height: 100% !important;
}

/* 使用深度作用选择器修改子组件内部的样式 */
.el-header {
  height: 0px !important;
  background-color: #0B0909;
  color: #333;
  text-align: center;
  line-height: 100px;
  width: 100%;
  position: relative; /* 修改为相对定位 */
  overflow: visible; /* 确保父容器不会裁剪子元素 */
}

/* 为 el-main 添加独立样式 */
.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  flex: 1;
  padding-bottom: 50px; /* 假设页脚高度为 50px */
}

/* 为 el-container 添加独立样式 */
.index-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保父容器至少占满整个视口高度 */
}

.el-main {
  flex: 1; /* 让内容区域占据剩余空间 */
  padding-bottom: 0; /* 移除底部内边距 */
}

/* 确保 el-container 占满整个视口 */
.el-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.official-container {
  height: auto;
  max-height: 4000px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 10% 0 10%; /* 修改顶部内边距 */
  background-color: #f5f7fa;

  @media screen and (max-width: 1350px) {
    padding: 20px 10px 10px 10px; /* 响应式布局下的内边距 */
    gap: 10px;
  }

}

.layout-header {
  height: 60px; /* 设置固定高度 */
}

.sticky-navbar {
  height: 60px; /* 设置固定高度 */
}
</style>
